<template>
    <div id="app" style="width:88%;margin:40px auto">
        <el-button type="primary"  @click="joinItem" style="float:left">添加物流线路</el-button>
        <div style="float:right;">
            <el-input v-model="input" placeholder="输入关键字搜索" style="width:300px;margin: 10px;"></el-input>
            <el-button type="primary" @click="searchItem">搜索</el-button>
        </div>
      <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%;">
            <el-table-column prop="logName" label="名称" width="100">
            </el-table-column>
            <el-table-column prop="logPath" label="途径" width="200">
            </el-table-column>
            <el-table-column prop="logAddress" label="地址" width="260">
            </el-table-column>
            <el-table-column prop="logPhone" label="电话" width="180">
            </el-table-column>
            <el-table-column prop="logId" label="操作">
                <template slot-scope="scope">
                    <el-button size="small"  @click="changeItem(scope.row.logId)">编辑</el-button>
                    <el-button size="small"  @click="TopItem(scope.row.logId)">置顶</el-button>
                    <el-button type="danger" size="small"  @click="deleteItem(scope.row.logId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="page"
        @current-change="changePage"
        :total="total"
        :page-size.sync="size">
        </el-pagination>
      </div>
      <div>
        <!-- <el-button type="text" @click="dialogVisible = true">上传图片</el-button> -->
        <el-dialog
          title="添加物流线路"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose">
          <el-form ref="user" :model="item" label-width="80px">
            <el-form-item label="名称">
              <el-input v-model="item.logName"></el-input>
            </el-form-item>
            <el-form-item label="途径">
              <el-input v-model="item.logPath"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="item.logAddress"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="item.logPhone"></el-input>
            </el-form-item>   
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="makeSure">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    
  </template>
  
  <script>
    export default {
    data() {
      return {
        input:'',
        dialogVisible: false,
        tableData:[],
        page:1,
        total:200,
        size:5,
        item:{
            logId:1,
            logName: '2016-05-02',
            logPath: '王小虎',
            logAddress: '上海市普陀区金沙江路 1518 弄',
            logPhone:'123456789',
        },
      };
    },
    methods: {
        changePage(pag){
            this.page = pag;
            console.log(this.page);
            this.getLogistics();
        },
        changeItem(id){
            this.dialogVisible = true;
            var logItem = this.tableData.filter(item => item.logId == id);
            console.log(logItem);
            if(logItem){
              this.item = logItem[0];
            }
        },
        async deleteItem(id){
          console.log(id);
            await this.$axios.post("http://localhost:3000/deletelog",{id:id})
            .then(res=>{
                console.log(res);
                this.getLogistics();
                this.getLCount()
            })
        },
        async TopItem(id){
          await this.$axios.post("http://localhost:3000/toplog",{id:id})
            .then(res=>{
                console.log(res);
                this.getLogistics();
                this.getLCount()
            })
        },
        joinItem(){
            this.dialogVisible = true;
            this.item = {
              id:'',
              name: '',
              path: '',
              address: '',
              phone:'',
            }
        },
        async searchItem(){
          await this.$axios.post("http://localhost:3000/searchlog",{name:this.input})
            .then(res=>{
                console.log(res);
                this.tableData = res;
               this.total = this.tableData.length;
            })
        },
        async makeSure(){
            this.dialogVisible = false;
            console.log(this.user);
            await this.$axios.post("http://localhost:3000/changelog",{logItem:this.item})
              .then(res=>{
                  console.log(res);
                  this.getLogistics();
                  this.getLCount()
            })
        },
        async getLogistics(){
          await this.$axios.post('http://localhost:3000/getlogistics',{page:this.page})
            .then(res=>{
                // console.log(res);
                this.tableData=res;
              })
        },
        async getLCount(){
          await this.$axios.get('http://localhost:3000/getulcount')
            .then(res=>{
                this.total=res;
              })
        }
    },
    mounted(){
      this.getLogistics();
      this.getLCount()
    }
  }
  </script>
  
  <style>
  
  </style>